<template>
  <div class="app-container">
    <div>
      <div class="filter-container">
        <el-input
          v-model="listQuery.cnName"
          placeholder="表名"
          style="width: 25%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.number"
          placeholder="编码(只输数字)"
          style="width: 15%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-input
          v-model="listQuery.cnDescription"
          placeholder="备注"
          style="width: 20%;"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />
        <el-select
          v-model="listQuery.flag"
          placeholder="请选择价格类型"
          class="filter-item"
          clearable
        >
          <el-option label="一般价格" :value="2">一般价格</el-option>
          <el-option label="特殊价格" :value="3">特殊价格</el-option>
          <el-option label="促销价" :value="1">促销价</el-option>
        </el-select>
        <el-select
          v-model="listQuery.exportFlag"
          placeholder="状态"
          class="filter-item"
        >
          <el-option label="待导出" value="待导出">待导出</el-option>
          <el-option label="已导出" value="已导出">已导出</el-option>
        </el-select>
        <br />
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          :loading="downloadLoading"
          class="filter-item"
          style="margin-left: 10px;"
          type="danger"
          @click="handleExportPL(row)"
        >
          <wjf-svg-icon icon-class="excel" />
          批量导出
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          icon="el-icon-delete"
          plain
          @click="handleDelete"
          >删除</el-button
        >
        <el-link type="info" style="font-size:13px" @click="importTemplate"
          >下载导入模板</el-link
        >
        <el-button-group style="width: 55%;">
          <el-button
            plain
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="handleImport"
          >
            <wjf-svg-icon icon-class="file" />
            导入客户价目表
          </el-button>
        </el-button-group>
      </div>

      <wjf-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        header-row-class-name="el-table-tj"
        tooltip-effect="dark"
        :columns="columns"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        @selection-change="selectionChange"
        @sort-change="sortChange"
      >
        <el-table-column
          type="selection"
          align="center"
          slot="selection"
        ></el-table-column>
        <template slot="actions" slot-scope="{ scope: { row } }">
          <el-button
            :loading="downloadLoading"
            class="filter-item"
            style="margin-left: 10px;"
            type="danger"
            @click="handleExportForId(row)"
          >
            <wjf-svg-icon icon-class="excel" />
            导出
          </el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary "
            @click="func(row)"
            >查看明細</el-button
          >
        </template>
      </wjf-table>
      <wjf-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <imports
        :visible="importVisible"
        @importSuccess="handleImportSuccess"
        @closed="handleImportClose"
      />
    </div>
  </div>
</template>
<style></style>
<script>
import { importTemplate, selectprice } from "@/api/price/cusprice/index";
import listCommon from "@/views/common/list";
import imports from "./components/import";
export default {
  name: "Cusprice",
  components: { imports },
  mixins: [listCommon],
  data() {
    return {
      exportFileName: "销售价目表.xlsx",
      exportFileName1: "销售价目表模板.xlsx",
      importVisible: false,
      viewVisible: false,
      file: {},
      viewProps: {
        width: "50%"
      },
      listQuery: {
        id: "",
        cnName: "",
        number: "",
        cnDescription: "",
        flag: "",
        exportFlag: "",
        expiryDate: "",
        customerId: [],
        orderBy: "create_time",
        count: null
      },
      columns: [
        {
          label: "表名",
          key: "cnName",
          width: 200,
          align: "center"
        },
        {
          label: "编码",
          key: "number",
          width: 120
        },
        {
          label: "备注",
          key: "cnDescription"
        },
        {
          label: "价格类型",
          key: "flagName",
          width: 100
        },
        {
          label: "时间",
          key: "createTime",
          width: 160
        },
        {
          label: "状态",
          key: "exportFlag",
          width: 80
        },
        {
          label: "操作",
          key: "actions",
          width: 300
        }
      ]
    };
  },
  methods: {
    handleExportForId(row) {
      // 如果为促销价做分类导出
      if (row.flag === 1) {
        selectprice(row.id).then(response => {
          console.log(response);
          this.listQuery.count = response;
          if (response.length > 1) {
            response.forEach((element, index) => {
              this.oldParams = {
                id: row.id,
                customerId: element,
                count: response.length,
                index: index
              };
              this.handleExport();
            });
          }
          if (response.length === 1) {
            this.oldParams = { id: row.id, count: response.length };
            this.handleExport();
          }
        });
      } else {
        this.oldParams = { id: row.id };
        this.handleExport();
      }
    },
    handleExportPL() {
      this.selectionList.forEach((element, index) => {
        if (element.flag === 1) {
          this.handleExportForId(element);
        } else {
          this.oldParams = { id: element.id };
          this.handleExport();
        }
      });
    },
    handleViewClose() {
      this.viewVisible = false;
    },
    handleImportSuccess(res) {
      this.handleFilter();
    },
    handleImport() {
      this.importVisible = true;
    },
    handleImportClose() {
      this.importVisible = false;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(response);
        a.download = this.exportFileName1;
        a.click();
      });
    },
    func(row) {
      this.$router.push({ path: "/price/cuspricemx", query: { id: row.id } });
    },
    handleDelete() {
      console.log(this.selectionList);
      if (!this.selectionList || !this.selectionList.length) {
        this.$message.error("请至少选择一项");
        return;
      }
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.batchDelete();
        })
        .catch(e => {});
    },
    batchDelete() {
      const { batchDelete } = this.api;
      batchDelete({
        ids: this.selectionList.map(item => item.id)
      }).then(() => {
        this.handleFilter();
      });
    }
  }
};
</script>
